import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  messageContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    marginVertical: 6,
    marginHorizontal: 10,
  },
  menu: {
    flexDirection: "row",
    backgroundColor: "transparent",
    alignContent: "space-between",
    gap: 10,
    paddingVertical: 2.5, // 上下共 5px
    borderRadius: 8,
    alignItems: "center",
  },
  menuItem: {
    color: "#fff",
    fontSize: 14,
  },
  // endregion

  // region 聊天气泡位置
  containerLeft: {
    justifyContent: "flex-start",
  },
  containerRight: {
    justifyContent: "flex-end",
  },
  // endregion

  //region 单选按钮
  selectButton: {
    alignSelf: "center",
    marginRight: 4,
  },
  //endregion

  // region 消息选择模式
  messageSelectableContainer: {
    flex: 1,
  },
  // endregion

  // region 聊天气泡
  messageBubble: {
    maxWidth: 200,
    padding: 10,
  },
  messageBubbleStyle: {
    borderRadius: 8,
    backgroundColor: "#f0f0f0",
    elevation: 2,
  },
  bubbleLeft: {
    marginLeft: 8,
  },
  bubbleLeftStyle: {
    backgroundColor: "#e0e0e0",
    borderBottomLeftRadius: 0,
  },
  bubbleRight: {
    marginRight: 8,
  },
  bubbleRightStyle: {
    backgroundColor: "#d1f4ff",
    borderBottomRightRadius: 4,
  },
  // endregion

  // region 聊天气泡内样式
  sender: {
    fontSize: 12,
    color: "#888",
    marginBottom: 4,
  },
  avatarContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "transparent",
    marginRight: 8,
    alignSelf: "center", // 头像靠上对齐气泡顶部
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    minHeight: 40, // 防止因为媒体内容太小导致头像漂移
  },
  image: {
    width: 100,
    height: 100,
    maxWidth: 200,
    maxHeight: 200,
    borderRadius: 8,
    resizeMode: "contain",
  },
  messagestatus: {
    alignSelf: "center",
    marginHorizontal: 5,
  },
  sendTime: {
    fontSize: 12,
    color: "#999",
    marginTop: 4,
    textAlign: "right", // 可根据需要调整为 "left" 或 "center"
  },
  // endregion
});

export default styles;
